<template>
	<view class="order-wrap">
		<view class="order-list">
			<view class="item" v-for="(item,index) in invoice_list" :key="index">
				<view class="item-top flex-between">
					<text class="order-sn">订单号：{{item.order_id}}</text>
					<text class="status">{{item.statusText}}</text>
				</view>

				<view class="item-center">
					<view class="products-wrap">
						<view class="product-list">

							<view class="product-item flex" v-for="(product,index) in item.products">
								<view class="poster-box">
									<image :src="product.image" mode="aspectFill"></image>
								</view>
								<view class="info">
									<view class="title-box">
										<view class="title ellipsis-1">
											{{product.title}}
										</view>
									</view>
									<view class="desc-box">
										<view class="desc ellipsis-1">
											{{product.keyVals}}
										</view>
									</view>
									<view class="price-box flex-between">
										<view class="price-info">
											<text class="huobi">￥</text>
											<text class="price">{{product.priceSale || 0}}</text>
											<text class="unit" v-if="product.unit">/{{product.unit}}</text>
										</view>
										<text class="num">x {{product.num}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="item-bottom ">
					<!-- <view class="total-box ">
							<view class="price">
								合计金额：￥{{item.price}}
							</view>
						</view> -->

					<view class="btns flex">
						<view class="btn fit-text btn-detail" @click="toDetail(item)">
							开票详情
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "invoice-pop",
		props: {
			invoice_list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {

			}
		},

		created() {

		},
		methods: {
			toDetail(item) {
				this.toRoute({
					path: '/invoice-detail',
					query: {
						invoice_id: item.id,
						order_id: item.id,
						type: 'order'
					}
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	.order-wrap {
		.order-list {
			.item {
				margin-bottom: 24rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				padding: 32rpx 24rpx;
				margin-bottom: 20rpx;
				background: #FFFFFF;


				.item-top {
					padding: 0 0;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;

					.order-sn {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #B3B9C9;
					}

					.status {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FF0000;
					}
				}

				.item-center {
					// border-top: 1rpx solid #eee;
				}

				.item-bottom {
					// border-top: 1rpx solid #eee;
					// padding: 20rpx 0;


					.total-box {
						text-align: right;

						.price {
							text-align: right;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}
					}

					.btns {
						margin-top: 30rpx;
						flex: 1;
						justify-content: flex-end;
						overflow: hidden;
						flex-wrap: wrap;

						.btn {
							margin-left: 20rpx;
							padding: 0 24rpx;
							min-width: 146rpx;
							height: 64rpx;
							background: #F8F8F8;
							border-radius: 40rpx 40rpx 40rpx 40rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;

							&.btn-detail {}

							&.btn-pay {
								background: #CB0011;
								color: #FFFFFF;
							}

							&.btn-reviews {}

							&.btn-cancel {}
						}
					}
				}
			}
		}



		.products-wrap {
			padding: 0 0;

			.product-list {
				.product-item {
					padding: 32rpx 0;

					&+.product-item {
						border-top: 1rpx solid #eee;
					}

					.poster-box {
						width: 176rpx;
						height: 176rpx;
						border-radius: 8rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.info {
						flex: 1;
						overflow: hidden;
						padding-left: 32rpx;



						.title-box {}

						.title {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #222222;
							line-height: 1.5;
						}

						.desc-box {
							margin-top: 14rpx;

							.desc {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #B2AFC9;
								line-height: 32rpx;
							}
						}


						.price-box {
							margin-top: 24rpx;

							.price-info {
								.huobi {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 20rpx;
									color: #000000;
								}

								.price {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 36rpx;
									color: #000000;
								}

								.unit {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 20rpx;
									color: #000000;
								}
							}

							.num {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 24rpx;
								color: #000000;
							}

						}
					}
				}

			}

		}
	}
</style>